<template>
	<view class="foldable-container">
		<!-- 头部区域 -->
		<view class="header">
			<!-- 左上角元素 -->
			<view class="left-section">
				<view class="green-rectangle"></view>
				<span>{{title}}</span>
			</view>
			<!-- 右上角元素 -->
			<view class="right-section" @click="toggleFold">
				<span>{{rightTile}}</span>
				<i :class="['arrow-icon', isFolded ? 'arrow-right' : 'arrow-down']"></i>
			</view>
		</view>
		<!-- 可折叠内容区域 -->
		<view v-if="!isFolded" class="content">

			<view class="grid-container">
				<!-- item元素  -->
				<view class="conten-item" v-for="item in contents">
					<!-- checkbox 和文本 -->
					<checkbox-group @change="handleChange">
						<view class="checkbox-content">
							<checkbox :value="item.name"></checkbox>
							<text class="text1">{{item.name}}</text>
						</view>
					</checkbox-group>
					<!-- 右上角标签 -->
					<view v-if="item.isGood" class="tag">优质</view>
				</view>

			</view>


		</view>
	</view>
</template>

<script>
	export default {
		name: "FoldContainer",
		data() {
			return {
				// 定义一个boolean类型的变量
				isFolded: false,
				rightTile: "请选择"
			};
		},
		props: {
			// 检测类型 + 其他验证
			title: {
				type: String,
				default: "房产",
				required: true
			},
			//列表属性
			contents: {
				type: Array,
				default: () => []
			}
		},


		methods: {
			toggleFold() {
				// 切换isActive的值
				this.isFolded = !this.isFolded;

			},

			handleChange(e) {
				console.log("点击了：", e.detail.value[0]);
				const data = {
					parent: this.title,
					content: e.detail.value[0]
				}

				this.rightTile = e.detail.value[0];
				this.isFolded = true;
				console.log(data)
				this.$emit('check-event', data);
			}
		}
	}
</script>

<style scoped>
	.foldable-container {
		/* border: 1px solid #fff; */
		margin: 40rpx;
		overflow: hidden;
	}

	.header {
		width: 610rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.left-section {
		font-size: 29.63rpx;
		color: #333333;
		display: flex;
		align-items: center;
	}

	.green-rectangle {
		width: 7rpx;
		height: 27rpx;
		background-color: #0E82E5;
		margin-right: 10px;
	}

	.right-section {
		margin-right: 30rpx;
		font-size: 29.63rpx;
		color: #0E82E5;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.arrow-icon {
		display: inline-block;
		width: 0;
		height: 0;
		border-style: solid;
		margin-left: 5px;
	}

	.arrow-right {
		border-width: 5px 0 5px 8.7px;
		border-color: transparent transparent transparent #666;
	}

	.arrow-down {
		border-width: 8.7px 5px 0 5px;
		border-color: #666 transparent transparent transparent;
	}

	.content {
		width: 610rpx;

	}

	.right-arrow {
		width: 25.69rpx;
		height: 25.69rpx
	}

	/* 容器样式 */
	.container {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.grid-container {
		/* 设置为网格布局 */
		display: grid;
		/* 定义两列，每列宽度为 1fr（平均分配剩余空间） */
		grid-template-columns: 1fr 1fr;
		/* 列与列之间的间距 */
		grid-column-gap: 10rpx;
		/* 行与行之间的间距 */
		grid-row-gap: 10rpx;
		/* 容器内边距 */
		padding: 10px;
	}

	/* 元素样式 */
	.conten-item {
		margin: 1%;
		/* width: 313.89rpx; */
		height: 91.67rpx;
		border: 1.39rpx solid #F3BB74;
		border-radius: 14rpx 14rpx 14rpx 14rpx;
		position: relative;
	}

	/* checkbox 和文本布局 */
	.checkbox-content {
		position: absolute;
		/* display: flex; */
		/* align-items: center; */
		top: 20rpx;
		left: 6%;


	}

	/* 右上角标签样式 */
	.tag {
		position: absolute;
		font-size: 15rpx;
		right: 0rpx;
		background-color: #F3BB74;
		color: white;
		padding: 10rpx;
		border-radius: 3rpx 14rpx 3rpx 14rpx;
	}

	.text1 {

		font-family: SimHei;
		font-size: 28rpx;
		color: #333333;
		line-height: 30rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
</style>